<template>
    <div class="app-container home">
        <img class="banner" src="@/assets/banner.png" alt="" />

        <div class="navTo">
            <div class="item" @click="navTo('/agent')">
                <img class="icon" src="@/assets/fwsgl.png" />
                <div class="font-num">服务商管理</div>
            </div>
            <div class="item" @click="navTo('/merchants')">
                <img class="icon" src="@/assets/shcx.png" />
                <div class="font-num">商户查询</div>
            </div>
            <div class="item" @click="navTo('/dataAnalysis')">
                <img class="icon" src="@/assets/sjfx.png" />
                <div class="font-num">数据分析</div>
            </div>
            <div class="item" @click="navTo('/rankingList')">
                <img class="icon" src="@/assets/phb.png" />
                <div class="font-num">排行榜</div>
            </div>
            <div class="item" @click="navTo('/share')">
                <img class="icon" src="@/assets/zyfx.png" />
                <div class="font-num">展业分享</div>
            </div>
        </div>
        <div class="title">
            <img class="minT" mode="widthFix" src="@/assets/box.png" />
            <span class="font-num">实时数据</span>
        </div>
        <!--        总览-->
        <div class="overdiv">
            <van-tabs v-model:active="active" swipeable>
                <van-tab title="收益总览">
                    <div class="card" @click="navTo('/earnings')">
                        <div class="top">
                            <div class="left">
                                <div class="name">
                                    今日收益
                                    <img src="@/assets/chevron-down@2x.png" alt="" />
                                </div>
                                <div class="money">￥ {{ profitSy.profitToday }}</div>
                            </div>
                            <div class="right">
                                <img src="@/assets/index(17).png" alt="" />
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="l">
                                <div class="name">昨日收益（元）</div>
                                <div class="num">{{ profitSy.profitYesterday }}</div>
                            </div>
                            <div class="c"></div>
                            <div class="r">
                                <div class="name">本月收益（元）</div>
                                <div class="num">{{ profitSy.profitCurrMonth }}</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="交易总览">
                    <div class="card" @click="navTo('/trading')">
                        <div class="top">
                            <div class="left">
                                <div class="name">
                                    今日交易
                                    <img src="@/assets/chevron-down@2x.png" alt="" />
                                </div>
                                <div class="money">￥ {{ profitJy.thisDayAmount }}</div>
                            </div>
                            <div class="right">
                                <img src="@/assets/index(17).png" alt="" />
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="l">
                                <div class="name">昨日交易（元）</div>
                                <div class="num">{{ profitJy.yesDayAmount }}</div>
                            </div>
                            <div class="c"></div>
                            <div class="r">
                                <div class="name">本月交易（元）</div>
                                <div class="num">{{ profitJy.thisMonthAmount }}</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <!--        统计-->
        <div class="statistics" style="margin-top: 10px">
            <van-tabs v-model:active="activeStatistics" swipeable>
                <van-tab title="终端统计">
                    <div class="bottomCard" @click="navTo('/pos')">
                        <div class="top">
                            <img src="@/assets/minIcon.png" alt="" />
                            <div class="name">终端总数</div>
                            <img style="height: 20px" src="@/assets/chevron-down@2x.png" alt="" />
                        </div>
                        <div class="center">
                            {{ posNum.totalActNum }}
                        </div>
                        <div class="bottom">
                            <div class="left">昨日唤醒 &nbsp;&nbsp;&nbsp;&nbsp; {{ posNum.ystdActNum }}</div>
                            <div class="right">昨日绑定 &nbsp;&nbsp;&nbsp;&nbsp; {{ posNum.ystdBindNum }}</div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="商户统计">
                    <div class="bottomCard" @click="navTo('/merchants')">
                        <div class="top">
                            <img src="@/assets/minIcon.png" alt="" />
                            <div class="name">商户总数</div>
                            <img style="height: 20px" src="@/assets/chevron-down@2x.png" alt="" />
                        </div>
                        <div class="center">
                            {{ customNo.allIncrNum }}
                        </div>
                        <div class="bottom">
                            <div class="left">昨日唤醒 &nbsp;&nbsp;&nbsp;&nbsp; {{ customNo.ystdAgentIncrNum }}</div>
                            <div class="right">昨日绑定 &nbsp;&nbsp;&nbsp;&nbsp; {{ customNo.ystdSubAgentIncrNum }}</div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup name="home">
import { agentTransFirstPage, appStatisCust, appStatisPosAct, homeStatisticBannerSummary } from '../../api'
import { computed, watch } from 'vue'
import store from '../../store'
import { showConfirmDialog } from 'vant'

const router = useRouter()
const active = ref(0)
const activeStatistics = ref(0)
const profitSy = ref({
    //收益详情
    profitToday: '0',
    profitYesterday: '0',
    profitCurrMonth: '0'
})
const profitJy = ref({
    // 交易i详情
    thisDayAmount: '0',
    yesDayAmount: '0',
    thisMonthAmount: '0'
})
const customNo = ref({
    allIncrNum: '0',
    ystdAgentIncrNum: '0',
    ystdSubAgentIncrNum: '0'
}) // 商户统计信息集合
const posNum = ref({
    totalActNum: '0',
    ystdActNum: '0',
    ystdBindNum: '0'
}) // 终端统计集合

const navTo = path => {
    if (store.state.user.userInfo.agentBean.status === 'INIT') {
        showConfirmDialog({
            title: '未认证',
            message: '用户信息未完善，为了你的账户和资金安全请进行实名认证'
        })
            .then(() => {
                router.push({
                    path: '/addService?agentNo=' + store.state.user.userInfo.agentBean.agentNo
                })
            })
            .catch(() => {
                // on cancel
            })
        return
    }
    router.push({
        path
    })
}
const getHomeStatisticBannerSummary = () => {
    homeStatisticBannerSummary().then(res => {
        profitSy.value = res.object
    })
}
const getAgentTransFirstPage = () => {
    agentTransFirstPage().then(res => {
        profitJy.value = res.object
    })
}
const getAppStatisPosAct = () => {
    appStatisPosAct({ agencySource: '', agentNo: '' }).then(res => {
        posNum.value = res.object
    })
}
const getAppStatisCust = () => {
    appStatisCust({ agencySource: '', agentNo: '' }).then(res => {
        customNo.value = res.object
    })
}

if (store.state.user.userInfo.agentBean.status === 'INIT') {
    showConfirmDialog({
        title: '未认证',
        message: '用户信息未完善，为了你的账户和资金安全请进行实名认证'
    })
        .then(() => {
            router.push({
                path: '/addService?agentNo=' + store.state.user.userInfo.agentBean.agentNo
            })
        })
        .catch(() => {
            // on cancel
        })
} else {
    getHomeStatisticBannerSummary()
    getAgentTransFirstPage()
    getAppStatisPosAct()
    getAppStatisCust()
}

const getShowTask = computed(() => {
    //返回的是ref对象
    return store.state.user.token
})
watch(
    getShowTask,
    (newVal, oldVal) => {
        if (newVal && oldVal) {
            getHomeStatisticBannerSummary()
            getAgentTransFirstPage()
            getAppStatisPosAct()
            getAppStatisCust()
        }
    },
    { immediate: true, deep: true }
)
</script>

<style scoped lang="scss">
.app-container.home {
    padding: 10px;

    .banner {
        width: 100%;
    }

    .navTo {
        margin-top: 10px;
        background: #ffffff;
        opacity: 1;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;

        .item {
            width: 25%;
            span-align: center;
            padding: 10px 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;

            .icon {
                height: 42px;
                margin-bottom: 5px;
            }
        }
    }

    .title {
        padding: 10px 0;
        display: flex;
        align-items: center;

        .minT {
            width: 6px;
        }

        .font-num {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            margin-left: 10px;
        }
    }

    .overdiv,
    .statistics {
        background: #ffffff;
        opacity: 1;
        overflow: hidden;
        border-radius: 8px;
    }

    .card {
        padding: 10px;

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #c2dcff;

            .left {
                .name {
                    font-size: 20px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #343434;
                    opacity: 1;
                    margin-left: 5px;
                    display: flex;
                    align-items: center;

                    img {
                        width: 24px;
                    }
                }

                .money {
                    font-size: 32px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    padding: 10px 0;
                    color: #66d6ff;
                    opacity: 1;
                }
            }

            .right {
                img {
                    width: 103px;
                }
            }
        }

        .bottom {
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .l,
            .r {
                text-align: center;

                .num {
                    margin-top: 10px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #66d6ff;
                    opacity: 1;
                }
            }

            .c {
                height: 26px;
                border: 1px solid #c2dcff;
                opacity: 1;
            }
        }
    }

    .bottomCard {
        padding: 10px;

        .top {
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                height: 14px;
            }

            .name {
                font-size: 14px;
                font-family: Segoe UI;
                font-weight: 400;
                color: #343434;
                opacity: 1;
                padding: 0 10px;
            }
        }

        .center {
            font-size: 32px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #66d6ff;
            opacity: 1;
            text-align: center;
        }

        .bottom {
            display: flex;
            justify-content: space-around;
        }
    }
}
</style>
